<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

  <head>
    <!-- Title -->
    <title>Create new account | Graindashboard UI Kit</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Favicon -->
    <link rel="shortcut icon" href="/img/favicon.ico">

    <!-- Template -->
    <link rel="stylesheet" href="/css/graindashboard.css">
<!--开始验证部分-->
	  <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.12.3/jquery.min.js"></script>
	  <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/jquery.validate.min.js"></script>
	  <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/localization/messages_zh.min.js"></script>

	  <script>

		  window.onload = function(){
			  document.getElementById("form").onsubmit = function(){
				  return checkUsername()  && checkMobilePhone() && checkIdnumber();
			  };
			  document.getElementById("username").onblur = checkUsername;
			  document.getElementById("telphone").onblur = checkMobilePhone;

		  }
		  // 名字为2到10位汉字

		  function checkUsername(){
			  var username = document.getElementById("name").value;
			  var reg_username =/^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;

			  var flag = reg_username.test(username);
			  var s_username = document.getElementById("s_username");
			  if(flag){
				  return true;
			  }else{
				  s_username.innerHTML = "用户名格式有误";
				  s_username.style.color="red";

				  setTimeout(function() {
					  s_username.innerHTML = "";
					  s_username.style.color = ""; // 可选：重置文本颜色
				  }, 4000);

				  return false;
			  }

		  }


		  // 号码为11位数字，，且1开头
		  function checkMobilePhone() {
			  var telphone = document.getElementById("phone").value;
			  var phoneReg=/^1[3456789]\d{9}$/;

			  var flag = phoneReg.test(telphone);
			  var mobile_input = document.getElementById("mobile_input");
			  if(flag)
			  {
				  return true;
			  }else{
				  mobile_input.innerHTML = "电话号码格式有误";
				  mobile_input.style.color="red";

				  setTimeout(function() {
					  mobile_input.innerHTML = "电话号码格式有误";
					  mobile_input.style.color = "red"; // 可选：重置文本颜色
				  }, 4000);
				  return false;
			  }
		  }
		  // 身份证
		  // 居民身份证号码，正确、正式的称谓应该是“公民身份号码”。根据【中华人民共和国国家标准 GB 11643-1999】中有关公民身份号码的规定，公民
		  // 身份号码是特征组合码，由十七位数字本体码和一位数字校验码组成。排列顺序从左至右依次为：六位数字地址码，八位数
		  // 字出生日期码，三位数字顺序码和一位数字校验码。





		  function checkIdnumber() {
			  var idNumber = document.getElementById("idNumber").value;
			  var idNumberReg=/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

			  var flag = idNumberReg.test(idNumber);
			  var idNumber_input = document.getElementById("idNumber_input");
			  if(flag)
			  {
				  return true;
			  }else{
				  idNumber_input.innerHTML = "身份证格式有误";
				  idNumber_input.style.color="red";
				  setTimeout(function() {
					  idNumber_input.innerHTML = "身份证格式有误";
					  idNumber_input.style.color="red"; // 可选：重置文本颜色
				  }, 4000);
				  return false;
			  }
		  }
		  // 密码为6到8为数字字母符号组合


		  function checkform(){
			  //表单总确认
			  if(checkUsername() && checkMobilePhone() &&checkIdnumber()==true){
				  window.alert("恭喜您！注册成功");
				  return true;
			  }else{
				  window.alert("请您核对一下您的注册信息是否有误");
				  return false;
			  }

		  }
	  </script>



  </head>

  <body class="">
	<main class="main">
      <div class="content">

			<div class="container-fluid pb-5">

				<div class="row justify-content-md-center">
					<div class="card-wrapper col-12 col-md-4 mt-5">
						<div class="brand text-center mb-3">

						</div>
						<div class="card">
							<div class="card-body">
								<h4 class="card-title">Create new account</h4>
<!--		form -->
								<form action="/users/register" method="post" id="form">

<!--		name	-->
									<div class="form-group">
										<label for="name">name</label>
										<input type="text" class="form-control" id="name" name="name" required="" οnblur="checkUsername(this.value)" placeholder="请输入2到10位汉字为姓名" >
										<span id="s_username" class="error"></span>
									</div>
									<div class="form-group" id="genderBox">
										<label style="margin-right: 40px;" >gender</label>
										<input type="radio" name="gender" value="男" checked> 男
										<input type="radio" name="gender" style="margin-left: 20px;" value="女"> 女
									</div>
<!--									身份证-->
									<div class="form-group">
										<label for="idNumber">idNumber</label>
										<input id="idNumber" type="text" class="form-control" name="idNumber" required="" placeholder="身份证号码">
										<span class="error" id="idNumber_input"></span>
									</div>

									<div class="form-group">
										<label for="phone">phone</label>
										<input id="phone"  class="form-control" name="phone" required="" placeholder="请输入11位电话号码">
										<span class="error" id="mobile_input"></span>
									</div>
<!--									Passworld-->
									<div class="form-group">
										<label for="password">Password
										</label>
										<input id="password" type="password" class="form-control" name="password" required="" minlength="6" maxlength="8" placeholder="请输入6到8位数字，字母符号组合为密码">
										</span>
										<span id="s_password" class="error"></span>
									</div>




<!--									<a></a>标签直接链跳转，无法验证-->
<!--									<div class="text-center mt-3 small">-->
<!--										Already have an account? <a href="/users/login">Sign In</a>-->
<!--									</div>-->
									<div class="text-center mt-3 small " >

										<button type="submit" class="btn btn-primary btn-block">Creat</button>
									</div>
									<div class="alert bg-danger text-white alert-dismissible d-flex align-items-center p-md-4 mb-2 fade show" role="alert" th:if="${errorMsg != null}">
										<i class="gd-alert icon-text mr-2"></i>
										<p class="mb-0">
											<strong>Error</strong>
											<span th:text="${errorMsg}"></span>
										</p>
										<button type="button" class="close" aria-label="Close" data-dismiss="alert">
											<i class="gd-close icon-text icon-text-xs" aria-hidden="true"></i>
										</button>
									</div>
								</form>
							</div>
						</div>
						<footer class="footer mt-3">
							<div class="container-fluid">
							</div>
						</footer>
					</div>
				</div>
			</div>
      </div>
    </main>
	<script src="/js/graindashboard.js"></script>
	<script src="/js/graindashboard.vendor.js"></script>
  </body>
</html>